<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>研学分析统计：基地</title>
		<link rel="stylesheet" type="text/css" href="css/BE/BE_studies_analytic_statistics_base.css" />
		<!-- element引入开始 -->
			<script src="//unpkg.com/vue/dist/vue.js"></script>
			<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
			<!-- 引入样式 -->
			<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
			<!-- 引入组件库 -->
			<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- element引入结束 -->
	</head>
	<body>
		<header></header>
		<section>
			<!-- 标题 -->
			<div id="title-div">
				<p>研学分析统计：基地</p>
			</div>
			<!-- 搜索团 -->
			<div id="searchresult">
				<div id="search">
					<input id="searchtext" type="text" placeholder="请输入" />
					<img src="img/BE/search-icon.png" width="20px" height="20px" >
				</div>
				<template>
				<div style="padding-left: 50px;">
				  <el-table
				    :data="tableData"
				    style="width: 100%;margin-bottom: 20px;"
				    row-key="id"
				    border
				    default-expand-all
				    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
				    <el-table-column
				        prop="schoolname"
				        label="学校名称"
				        width="180">
				      </el-table-column>
				      <el-table-column
				        prop="hierarchy"
				        label="层级"
				        sortable
				        width="100">
				      </el-table-column>
				      <el-table-column
				        prop="population"
				        label="人数"
				        sortable
				        width="100">
				      </el-table-column>
				      <el-table-column
				        prop="studiespopulation"
				        label="研学人数"
				        sortable
				        width="110">
				      </el-table-column><el-table-column
				        prop="studiesproportion"
				        label="研学比例"
				        sortable
				        width="110">
				      </el-table-column>
				      <el-table-column
				        prop="destination"
				        label="目的地"
				        sortable
				        width="100">
				      </el-table-column><el-table-column
				        prop="vacancy"
				        label=""
				        sortable
				        width="100">
				      </el-table-column>
				      <el-table-column
				        prop="accident"
				        label="安全事故"
				        sortable
				        width="110">
				      </el-table-column><el-table-column
				        prop="remark"
				        label="备注"
				        width="80">
					  <template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
					  </template>
				      </el-table-column>
				    </el-table>
				</div>
				</template>
			</div>
		</section>
		<footer></footer>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/BE/BE_studies_analytic_statistics_base.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var searchresult = {
			    data() {
			      return {
			        tableData: [{
			          id: 1,
			          name: '郑州市实验中学',
					  area: '高中',
			          administrator: "6000",
					  receptionmasscount: "3000",
					  receptionpeoplecount: "50%",
					  tripmasscount: "5",
					  trippeoplecount: "2",
					  reservemasscount: "0",
					  remark: "查看详情"
			        },{
			          id: 2,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 3,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 4,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 5,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 6,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 7,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 8,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 9,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 10,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 11,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 12,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 13,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 14,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        },{
			          id: 15,
			          name: '',
					  area: '',
			          administrator: "",
					  receptionmasscount: "",
					  receptionpeoplecount: "",
					  tripmasscount: "",
					  trippeoplecount: "",
					  reservemasscount: "",
					  remark: ""
			        }]
			      }
			    },
			  }
			var Ctor = Vue.extend(searchresult)
			new Ctor().$mount('#searchresult')
		</script>
	</body>
</html>
